<template>
    <ul v-if="dataList.length">
        <li v-for="(item, i) in dataList" :key="i" v-show="expandFlag">
            <div :class="['weui-cell',hasArrow?'weui-cell_access':'']" style="padding-left:0px;" @click.stop="clickItem(item)">
                <!-- 展开的图标 -->
                <div class="weui-cell__hd " style="padding-right: 5px;font-size: medium;">
                    <svg v-bind:class="['icon',item.children && item.children.length ? 'red' : 'gray2']" aria-hidden="true" @click.stop="expandItem(item, i)">
                        <use xlink:href="#icon-jianhao" v-if="expandArr.includes(i)"></use>
                        <use xlink:href="#icon-jiahao" v-else></use>
                    </svg>
                </div>
                <!-- 选项名 -->
                <div class="weui-cell__bd">
                    <p>{{item[labelKey]}}</p>
                </div>
                <label class="weui-cell__ft" v-if="hasCheckBox">
                    <!-- <input type="checkbox" class="weui-check" :checked="item.checked" @change="checkItem(item)" :id="'tree_node_'+item[valueKey]"/>
                    <i class="weui-icon-checked"></i> -->
                    <svg class="icon green" aria-hidden="true" @click.stop="checkItem(item)">
                        <use xlink:href="#icon-gouxuan-xuanzhong-yuankuang1" v-show="item.checked==='checked'"></use>
                        <use xlink:href="#icon-gouxuan-weixuanzhong-xianxingyuankuang" v-show="item.checked==='unchecked'"></use>
                        <use xlink:href="#icon-gouxuan-xuanzhong-yuankuang" v-show="item.checked==='indeterminate'"></use>
                    </svg>
                </label>
                <div class="weui-cell__ft" v-if="hasArrow">
                    
                </div>
            </div>
        <TreeList
            v-if='item.children'
            :dataList='item.children'
            :valueKey='valueKey'
            :labelKey='labelKey'
            :hasCheckBox='hasCheckBox'
            :hasArrow='hasArrow'
            :expandFlag='expandArr.includes(i)'
            @clickItem='onClickItem'  
            @checkItem='onChildCheckedChange'    
        />
        </li>
    </ul>
</template>
<script>
export default {
    // 组件名必写
    name: 'TreeList',
    props: {
        // 选中的值的属性名，必传
        valueKey: String,
        // 在页面要展示的选项属性名，必传
        labelKey: String,
        // 控制展开，不需要传
        expandFlag: {
            type: Boolean,
            default: true
        },
        // 总数据，必传
        dataList: Array,
        //是否有选择框
        hasCheckBox: {
            type: Boolean,
            default: false
        },  
        //是否有箭头
        hasArrow: {
            type: Boolean,
            default: true
        },    
    },
    data () {
        return {
            // 当前级组件已展开的项
            expandArr: [],
        }
    },
    watch:{
        dataList:function(){
            if(this.dataList){                
                this.dataList.forEach(item=>{    
                    this.setParent(item);
                })
            }
        }
    },
    methods: {
        setParent(item){
            this.$set(item, "checked", "unchecked");
            if(item.children){
                item.children.forEach(chird=>{
                    chird.parent=item;
                    this.setParent(chird);
                })
            }
        },
        // 展开
        expandItem (item, i) {
            if (item.children && item.children.length) {
                let index = this.expandArr.indexOf(i)
                if (index > -1) {
                    this.expandArr.splice(index, 1)
                } else {
                    this.expandArr.push(i)
                }
            }
        },
        //点击
        clickItem(item){
            this.$emit('clickItem',item);
        },
        //点击事件传递
        onClickItem(item){
           this.clickItem(item)
        },
        //选择
        checkItem(item){
            var checked = "";
            switch(item.checked){
                case "checked":
                    checked="unchecked";
                    break;
                case "unchecked":
                case "indeterminate":
                    checked="checked";
                    break;
            }
            //递归变更状态
            this.setItemCheck(item,checked);

            //通知父组件变更
            this.$emit('checkItem',item);
        },
        onChildCheckedChange(item){
            //找一下爸爸组件
            if(item.parent){
                //检查一下子组件状态
                var checkdenum=0;
                var uncheckednum=0;
                var indeterminatenum=0;
                item.parent.children.forEach(chird=>{
                    switch(chird.checked){
                        case "checked":
                            checkdenum++;
                            break;
                        case "indeterminate":
                            indeterminatenum++;
                            break;
                        case "unchecked":
                            uncheckednum++;
                            break;
                    }                                   
                })
                if(indeterminatenum>0){
                    this.$set(item.parent, "checked", "indeterminate");
                }
                else{
                    if(checkdenum==0 && uncheckednum>0){
                        this.$set(item.parent, "checked", "unchecked");
                    }
                    else if(checkdenum>0 && uncheckednum==0){
                        this.$set(item.parent, "checked", "checked");
                    }
                    else if(checkdenum>0 && uncheckednum>0){
                        this.$set(item.parent, "checked", "indeterminate");
                    }
                }
                
                //冒泡提醒上级
                this.$emit('checkItem',item.parent);           
            }          
        },
        setItemCheck(item,checked){
            this.$set(item, "checked", checked);
            //设置所有子选项
            if(item.children){
                item.children.forEach(child => {
                    this.setItemCheck(child,checked);
                });
            }
        },        
    },
    created(){
        
    },
    mounted(){

    }
}
</script>
<style scoped>
li{
    list-style:none;
    padding-left:10px;
}
.padding-right-5em{
    margin-right: 5px;
}
</style>


